<template>
    <n-spin size="large" :show="loading">
        <n-table :single-line="false">
            <thead>
                <tr>
                    <th width="200px">字典项</th>
                    <th>字典值</th>
                    <th width="100px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="key in keys">
                    <td>
                        <n-space vertical size="small">
                            <h2>{{ key.title }}</h2>
                            <p>{{ key.memo }}</p>
                        </n-space>
                    </td>
                    <td>
                        <Value
                            v-if="vals[key.key]"
                            :vals="vals[key.key]"
                            @update:vals="
                                (news:any) => {                                                                        
                                    onChange(key.key, news)
                                }
                            "
                            :group="key.group"
                            :sort="key.sort"
                        ></Value>
                    </td>
                    <td>
                        <n-button
                            v-if="uis[key.key]"
                            type="primary"
                            @click="
                                () => {
                                    execSaveDict(key.key)
                                }
                            "
                        >
                            保存修改
                        </n-button>
                        <n-button v-else disabled>暂无改动</n-button>
                    </td>
                </tr>
            </tbody>
        </n-table>
    </n-spin>
</template>

<script lang="ts" setup>
import { Http } from '@/libs'
import { useStore } from '@/store'
import { computed, onActivated, ref } from 'vue'

import Value from './Value.vue'

const store = useStore()
const { $message: message } = window
const loading = computed(() => store.state.loading.flag)

const keys = [
    {
        key: 'serie_prop',
        title: '车系属性',
        memo: '车系自定义属性，例如：两厢/三厢/敞篷等',
        sort: false,
        group: true,
    },
    {
        key: 'serie_type',
        title: '车系分类',
        memo: '车系分类类型，例如：商务车/豪华型/跑车等',
        sort: true,
        group: false,
    },
]
const uis = ref<any>({})

const vals = ref<any>({})

const init = ref<boolean>(false)

const onChange = (key: string, items: any) => {
    uis.value[key] = true
    vals.value[key] = items
    console.log(key, items)
}

const execSaveDict = (key: string) => {
    let idx = 1

    let vs = vals.value[key].map((val: any) => {
        return {
            val: val.val,
            name: val.name,
            sort: idx++,
        }
    })

    Http.post('/ops/sys/dict/save', {
        key: key,
        vals: vs,
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        uis.value[key] = false
        message.success('保存成功')
    })
}
const execLoadDict = () => {
    init.value = false
    Http.post('/ops/sys/dict/list', {
        keys: keys.map(key => key.key),
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        let dicts: any = {}
        resp.data.items.forEach((item: any) => {
            dicts[item.key] = item.vals
        })
        vals.value = dicts
        init.value = true
    })
}

onActivated(() => {
    execLoadDict()
})
</script>
